<template>
  <transition name="slideFromBottom" v-if="isshow">
    <div class="couponList">
      <div class="cflex">
        <p class="coupontitle">请选择您的优惠券</p>
        <i class="icon icon-close" @click="hideDialog()"></i>
      </div>
      <div>
        <div class="item" v-for="item in lists"
             v-bind:class="{active: selectedCoupon && selectedCoupon.mcid == item.mcid}" v-bind:key="item.mcid"
             @click="hideDialog(item)">
          <div class=" flex">
            <div class="coupon-price selfCtenter">
              <p class="coupon-price-num">￥<span class="coupon-num">{{item.price}}</span></p>
              <p>{{item.name}}</p>
            </div>
            <div class="coupon-desc selfCtenter">
              <p class="title">{{item.info}}</p>
              <p>提示:{{item.msg}}</p>
              <p>有效期：{{item.startDate}} - {{item.endDate}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {AlertDialog, getFormatDate} from '../../common/js/common'
  export default({
    props: {
      'isshow': {
        type: Boolean,
        default: false
      },
      'activityId': {
        type: String,
        default: ''
      },
      'selectedCoupon': {
        type: Object,
        default: null
      }
    },
    data () {
      return {
        lists: null
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        let result = HttpRequest(linklist.couponlist, {pid: this.activityId}, 2)
        result.then((response) => {
          let body = response.body
          if (body.code === 0) {
            this.lists = body.data
            if (this.lists.length > 0) {
              this.lists.map((item, key) => {
                item.startDate = getFormatDate(item.startTime, '.', '', true, true, true, false, false, false)
                item.endDate = getFormatDate(item.endTime, '.', '', true, true, true, false, false, false)
              })
            }
          }
          else {
            AlertDialog('提示', body.msg)
          }
        }, (response) => {
          AlertDialog('提示', '获取优惠券列表失败，请稍后再试', '确定', true)
        }).catch((response) => {
          AlertDialog('提示', '获取优惠券列表失败，请稍后再试', '确定', true)
        })
      },
      hideDialog (item = '') {
        this.$emit('hideDialog', item)
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "../userCenter/coupon.styl"
</style>
